<!-- 新增调拨 -->
<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.show"
    width="530px"
    custom-class="mydialog"
    append-to-body
    @close="handleClose"
  >
    <div class="dialog-content">
      <el-form ref="form1" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="出货仓：">
          <el-select v-model="form.depotOutId" filterable placeholder="调出仓" class="seach-select" size="small">
            <el-option
              v-for="item in form.warehouseInList"
              :disabled="form.depotInId&&form.depotInId===item.warehouseId"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入货仓：">
          <el-select v-model="form.depotInId" filterable placeholder="调入仓" class="seach-select" size="small">
            <el-option
              v-for="item in form.warehouseList"
              :disabled="form.depotOutId&&form.depotOutId===item.warehouseId"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="SKU：">
          <el-autocomplete
            :disabled="!form.depotOutId||form.depotOutId==null"
            v-model="form.skuName"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入编码或名称"
            @select="handleSelect"

          />
        </el-form-item>
        <el-form-item label="出库数量：">
          <el-input v-model="form.allocationAmount" placeholer type="number"/>
        </el-form-item>
        <el-form-item label="物流公司：">
          <el-select
            v-model="form.expressCompany"
            filterable
            placeholder="选择物流公司"
            class="seach-select"
            size="small"
          >
            <el-option
              v-for="item in expressCompanys"
              :key="item.expressCompanyId"
              :label="item.expressCompanyName"
              :value="item.expressCompanyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号：">
          <el-input v-model="form.expressNumber" placeholer/>
        </el-form-item>
      </el-form>
      <div class="text-center mt-30">
        <el-button class="greenbt bt-wd" type="primary" @click="saveAllocation">确定出货</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {
  addAllocationRecord,
  querySkuInfoBySkuName
} from '@/api/pas/allocation'
import { getExpressCompanys, queryList } from '@/api/pas/delivery'
import { queryWarehouseByWarehouseName } from '@/api/pas/shop'
export default {
  props: {
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      skuList: [],
      expressCompanys: [],
      dialog: {
        title: '新增调拨',
        show: true
      },
      form: {
        skuName: '',
        depotOutId: null,
        depotInId: null,
        warehouseList: [],
        warehouseInList: [],
        allocationAmount: 1,
        expressNumber: '',
        expressCompany: '',
        express_company_options: [],
        skuInfo: {}
      },
      rules: {}
    }
  },
  mounted() {
    // querySkuInfoBySkuName('').then(res => {
    //   this.skuList = res.data.data
    //   for (var i = 0; i < this.skuList.length; i++) {
    //     this.skuList[i].value = this.skuList[i].name
    //   }
    // })

    this.getWarehouse()
    this.getExpressCompanyList()
    this.getInWarehouse()
  },
  methods: {
    // 获取仓库
    getWarehouse() {
      queryWarehouseByWarehouseName('').then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.form.warehouseList = res.data.data.filter((warehouse) => { return warehouse.warehouseName && warehouse.warehouseName !== '中转仓' })
        }
      })
    },

    getInWarehouse() {
      queryList(null)
        .then(response => {
          if (response.data.status === 'success') {
            this.form.warehouseInList = response.data.data.list
          }
        })
        .catch(error => {
          console.log(error)
        })
    },

    // isSelectSku(val){
    //   console.log(val)
    //   if(this.form.skuInfo){
    //     if(this.form.skuName !== this.form.skuInfo.skuName){
    //       this.form.skuInfo = null
    //     }
    //   }
    // },

    handleClose() {
      this.$emit('close')
    },
    // 出货
    saveAllocation() {
      const formData = new FormData()
      formData.append('depotOutId', this.form.depotOutId)
      formData.append('depotInId', this.form.depotInId)

      if (!this.form.skuInfo || !this.form.skuInfo.skuId) { this.$message.error('当前sku不存在或已失效，请重新输入'); return }

      formData.append('skuId', this.form.skuInfo.skuId)

      if (!this.form.allocationAmount || this.form.allocationAmount <= 0) { this.$message.error('出库数量必须大于0'); return }

      formData.append('allocationAmount', this.form.allocationAmount)
      formData.append('expressNumber', this.form.expressNumber)
      formData.append('expressCompany', this.form.expressCompany)
      addAllocationRecord(formData)
        .then(res => {
          if (res.data.status === 'faild') {
            this.$message.error(res.data.messge)
          } else {
            this.$message({
              message: '出货成功',
              type: 'success'
            })
            this.modalData.shutDownModelAndRefresh()
          }
        })
        .finally(() => {
          this.dialog.show = false
        })
    },
    handleSelect(item) {
      this.form.skuInfo = item
      console.log(item)
    },
    querySearchAsync(queryString, cb) {
      if (this.form.depotOutId == null) return false

      if (this.form.skuInfo) {
        if (queryString !== this.form.skuInfo.skuName) {
          this.form.skuInfo = null
        }
      }

      // 模糊查询sku表
      querySkuInfoBySkuName(queryString, this.form.depotOutId).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          // if (res.data.data[0] !== null) {
          //   this.form.skuInfo = res.data.data[0]
          // }
          this.skuList = res.data.data

          var skuList =
           this.skuList && this.skuList.length > 0
             ? this.skuList.map(sku => {
               sku.value = sku.skuName
               return sku
             })
             : this.skuList

          // var results = skuList;
          var results = queryString
            ? skuList.filter(this.createStateFilter(queryString))
            : skuList
          cb(results)
        } else {
          cb([])
        }
      })
    },
    createStateFilter(queryString) {
      return state => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        )
      }
    },
    getExpressCompanyList() {
      getExpressCompanys().then(res => {
        console.log(res)
        this.expressCompanys = res.data.data.list
      })
    }
  }
}
</script>
